<template>
  <div v-loading.fullscreen.lock="fullscreenLoading">
    <div v-bind:style="{display:display}">
      <myheader></myheader>
      <div class="clear"></div>
      <b class="line"></b>
      <div class="listMain">
        <!--分类-->
        <div class="nav-table">
          <div class="long-title"><span class="all-goods">全部分类</span></div>
          <div class="nav-cont">
            <ul>
              <li class="index"><a href="/">首页</a></li>
              <li class="qc"><a href="/trade/rusbuying">抢购</a></li>
              <li class="qc"><a href="/trade/auction">拍卖</a></li>
              <li class="qc"><a href="/foot">足迹</a></li>
            </ul>
          </div>
        </div>
        <ol class="am-breadcrumb am-breadcrumb-slash">
          <li><a href="/">首页</a></li>
          <li><a href="#">分类</a></li>
          <li class="am-active">内容</li>
        </ol>
        <div class="scoll">
          <section class="slider">
            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="../../assets/images/01.jpg" title="pic" />
                </li>
                <li>
                  <img src="../../assets/images/02.jpg" />
                </li>
                <li>
                  <img src="../../assets/images/03.jpg" />
                </li>
              </ul>
            </div>
          </section>
        </div>

        <!--放大镜-->

        <div class="item-inform">
          <div class="clearfixLeft" id="clearcontent">
            <!-- img start -->
            <div class="box">
              <div class="tb-booth tb-pic tb-s310">
                <a href="javascript:;;"><img v-bind:src="itemDetails.mainImg" class="jqzoom" /></a>
              </div>
              <ul class="tb-thumb" id="thumblist">
                <li class="tb-selected" v-for="img in itemDetails.imgs">
                  <div class="tb-pic tb-s40">
                    <a href="javascript:;;"><img v-bind:src="img" v-on:click="itemDetails.mainImg=img"></a>
                  </div>
                </li>
              </ul>
            </div>
            <!-- img end -->

            <div class="clear"></div>
          </div>

          <div class="clearfixRight">

            <!--规格属性-->
            <!--名称-->
            <div class="tb-detail-hd">
              <h1>
                {{item.itemName}}
              </h1>
              <router-link :to="{name:'user2',query:{'userId':item.userId}}"><span>查看卖家</span></router-link>
              <!--标签-->
              <div class="pt-10">
                <template v-for="label in labelList">
                  <span v-bind:class="label.labelColor" class="mr-5" style="font-size:0.8rem">{{label.labelName}}</span>
                </template>
              </div>
            </div>
            <div class="tb-detail-list">
              <!--价格-->
              <div class="tb-detail-price" style="height: auto">
                <li class="price iteminfo_price">
                  <dt>简 &nbsp&nbsp 介:</dt>
                  <dd><b class="sys_item_price">{{itemDetails.intro}}1</b> </dd>
                </li>
                <br />
                <template v-if="item.discountPrice!=null">
                  <li class="price iteminfo_price">
                    <dt>促销价:</dt>
                    <dd><em>¥</em><b class="sys_item_price">{{item.discountPrice}}</b> </dd>
                  </li>
                  <li class="price iteminfo_mktprice">
                    <dt>售 &nbsp&nbsp 价:</dt>
                    <dd><em>¥</em><b class="sys_item_mktprice">{{item.sellingPrice}}</b></dd>
                  </li>
                </template>
                <template v-else>
                  <li class="price iteminfo_price">
                    <dt>售 &nbsp&nbsp 价:</dt>
                    <dd><em>¥</em><b class="sys_item_price">{{item.sellingPrice}}</b></dd>
                  </li>
                </template>

                <li class="price iteminfo_mktprice" v-if="item.buyPrice!=''">
                  <dt>购买价:</dt>
                  <dd><em>¥</em><b class="sys_item_mktprice">{{item.buyPrice}}</b></dd>
                </li>
                <div class="clear"></div>
              </div>

              <!--地址-->
              <dl class="iteminfo_parameter freight" style="margin-left: 13px;margin-bottom: 0px;">
                <dt>邮 &nbsp&nbsp 费:</dt>
                <div class="iteminfo_freprice">
                  <div class="pay-logis" style="text-align: left;">
                    <b class="sys_item_freprice">10</b>元
                  </div>
                </div>
              </dl>
              <div class="clear"></div>

              <dl class="iteminfo_parameter freight" style="margin-left: 13px;margin-top: 0px;">
                <dt>所在地:</dt>
                <div class="iteminfo_freprice">
                  <div class="pay-logis" style="text-align: left;">
                    <b class="sys_item_freprice">10</b>元
                  </div>
                </div>
              </dl>
              <div class="clear"></div>
              <!--销量-->
              <ul class="tm-ind-panel">
                <li class="tm-ind-item tm-ind-sellCount canClick">
                  <div class="tm-indcon"><span class="tm-label">浏览量</span><span class="tm-count">{{itemExt.browser}}</span></div>
                </li>
                <li class="tm-ind-item tm-ind-sumCount canClick">
                  <div class="tm-indcon"><span class="tm-label">评论数</span><span class="tm-count">{{itemExt.comment}}</span></div>
                </li>
                <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
                  <div class="tm-indcon"><span class="tm-label">收藏量</span><span class="tm-count">{{itemExt.collection}}</span></div>
                </li>
              </ul>
              <div class="clear"></div>
            </div>
            <div class="pay">
              <div class="">
                <a v-if="collectFlag" v-on:click="collect()"><span class="am-icon-heart am-icon-fw mt-15" style="width:5rem;color:red">取消收藏</span></a>
                <a v-if="!collectFlag" v-on:click="collect()"><span class="am-icon-heart am-icon-fw mt-15" style="width:4rem">收藏</span></a>
              </div>
              <li>
                <div class="clearfix tb-btn tb-btn-buy theme-login" v-on:click="buyValidate()">
                  <a id="LikBuy" title="点此按钮到下一步确认购买信息" href="javascript:;;">立即购买</a>
                </div>
              </li>
              <li>
                <div class="clearfix tb-btn tb-btn-basket theme-login">
                  <a id="LikBasket" title="加入购物车" href="javascript:;;" v-on:click="addToShopCart()"><i></i>加入购物车</a>
                </div>
              </li>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <!-- introduce-->
        <div class="introduce">
          <div class="browse">
          </div>
          <div class="introduceMain">
            <div class="am-tabs" data-am-tabs>
              <ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs">
                <li v-bind:class="tbActive(1)" v-on:click="tbflag=1">
                  <a href="javascript:;;">
                    <span class="index-needs-dt-txt">宝贝详情</span></a>
                </li>
                <li v-bind:class="tbActive(2)" v-on:click="tbflag=2,getComment(1,10)">
                  <a href="javascript:;;">
                    <span class="index-needs-dt-txt">全部评价</span></a>
                </li>
                <li v-bind:class="tbActive(3)" v-on:click="tbflag=3,drawLine()">
                  <a href="javascript:;;">
                    <span class="index-needs-dt-txt">历史价格</span></a>
                </li>
              </ul>
              <div class="am-tabs-bd">
                <!--宝贝详情-->
                <div class="am-tab-panel am-fade am-in am-active" v-bind:style="{display:showTable(1)}">
                  <div class="J_Brand">
                    <div class="attr-list-hd tm-clear">
                      <h4>产品参数：</h4>
                    </div>
                    <div class="clear"></div>
                    <li v-for="spec in itemDetails.specification" style="float:left;padding:20px">
                      <span>{{spec.name}}</span>
                      <span>:</span>
                      <span>{{spec.value}}</span>
                    </li>
                    <div class="clear"></div>
                  </div>
                  <div class="details">
                    <div class="attr-list-hd after-market-hd">
                      <h4>商品细节</h4>
                    </div>
                    <div class="twlistNews" style="text-align: left; float: left;padding:20px" v-html="itemDetails.details">

                    </div>
                  </div>
                  <div class="clear"></div>
                </div>
                <!--评论-->
                <div v-bind:style="{display:showTable(2)}">
                  <div class="actor-new">
                    <div class="rate">
                      <strong>{{itemExt.comment}}<span></span></strong><br> <span>留言数</span>
                    </div>
                    <div class="am-u-lg-6 pt-20 fr" style="padding-right:0px">
                      <div class="am-input-group">
                        <input type="text" class="am-form-field" placeholder="不超过120字 " style="font-size:1rem" v-model="commentData">
                        <span class="am-input-group-btn">
                          <button class="am-btn am-btn-default" type="button" v-on:click="addComment()">留言</button>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="clear"></div>
                  <div class="clear"></div>
                  <!--评论列表-->
                  <ul class="am-comments-list am-comments-list-flip">
                    <li class="am-comment" v-for="comment in commentList">
                      <a href="">
                        <img class="am-comment-avatar" v-bind:src="comment.userLogo" />
                      </a>
                      <div class="am-comment-main">
                        <header class="am-comment-hd">
                          <div class="am-comment-meta">
                            <a href="#link-to-user" class="am-comment-author">{{comment.nickName}}</a>
                            评论于
                            <time datetime="" v-text="dateFormatter(comment.createTime)"></time>
                          </div>
                        </header>

                        <div class="am-comment-bd">
                          <div class="tb-rev-item " data-id="255776406962">
                            <div class="J_TbcRate_ReviewContent tb-tbcr-content ">
                              {{comment.content}}
                            </div>
                            <div class="tb-r-act-bar">
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <div class="clear"></div>
                  <!--分页 -->
                  <pageHandler ref="pgh"></pageHandler>
                  <div class="clear"></div>
                </div>
                <!--历史价格-->
                <div>
                  <div class="like">
                    <div id="myChart" style="width:100%;height:300px"></div>

                  </div>
                  <div class="clear"></div>
                  <div class="clear"></div>
                </div>
                <!--推荐end-->
              </div>
            </div>
            <div class="clear"></div>
            <myfooter></myfooter>
          </div>
        </div>
      </div>
      <!--右边导航-->
      <navfull></navfull>
    </div>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import pageHandler from '@/components/pageHandler.vue'
import myfooter from '@/components/foot.vue'

export default {
  name: 'item',
  data () {
    return {
      index: 1,
      fullscreenLoading: true,
      display: "none",
      tbflag: 1,
      collectFlag: false,
      item: {},
      itemDetails: {},
      itemExt: {},
      labelList: [{
        css: "am-badge am-badge-secondary am-radius",
        name: "包邮"
      }],
      commentList: {

      },
      commentData: ""
    }
  },
  components: {
    myheader,
    navfull,
    pageHandler,
    myfooter
  },
  beforeMount () {
    this.initItem();
  },

  mounted () { },
  methods: {
    initItem () {
      var itemId = this.$route.query.itemId;
      this.axios.get("/item/browser", {
        params: {
          itemId: itemId
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          var item = result.data;
          var itemExt = item.itemExt;
          var itemDetails = item.itemDetails;
          var imgs = itemDetails.imgs;
          itemDetails.imgs = imgs.split("^");
          if(itemDetails.specification!=undefined||itemDetails.specification!=null)
            itemDetails.specification = JSON.parse(itemDetails.specification);
          this.item = item;
          this.itemDetails = itemDetails;
          this.itemExt = itemExt;
          this.labelList = item.labelList;
          this.isCollect();
        }
      })
    },
    showTable (f) {
      if (f == this.tbflag) {
        return "block";
      }
      return "none"
    },
    tbActive (f) {
      if (f == this.tbflag) {
        return "am-active";
      }
      return ""
    },
    collect () {
      var itemId = this.item.itemId;
      this.axios.request({
        url: "/item/ext/collect",
        method: "put",
        params: {
          itemId: itemId
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.isCollect();
          this.getItemExt();
          return;
        }
        layer.msg(result.msg);
      })
    },
    isCollect () { //是否收藏商品
      var itemId = this.item.itemId;
      this.axios.get("/item/ext/isCollect", {
        params: {
          itemId: itemId
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.collectFlag = true;
        } else {
          this.collectFlag = false;
        }
        if (this.fullscreenLoading)
          this.$nextTick(() => {
            this.fullscreenLoading = false
            this.display = "block"
          })
      })
    },
    getItemExt () { //获取商品扩展信息
      var itemId = this.item.itemId;
      this.axios.get("/item/ext/itemExt", {
        params: {
          itemId: itemId
        }
      }).then((res) => {
        this.itemExt = res.data.data;
      })
    },
    buyValidate () { //购买时校验商品状态
      this.axios.post("/trade/orders", {
        itemId: this.item.itemId
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.$router.push({
            name: "orderconfirm",
            query: {
              orderId: result.data+"&&"
            }
          })
          return;
        } else {
          this.$layer.msg((result.msg == null ? "系统异常" : result.msg));
        }
      })
    },
    addToShopCart () { //添加到购物车
      this.axios.post("/trade/shopCart", {
        itemId: this.item.itemId
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.$layer.msg("添加成功");
        } else {
          this.$layer.msg((result.msg == null ? "添加失败" : result.msg));
        }
      })
    },
    addComment () { //添加评论
      this.axios.post("item/ext/comment", {
        content: this.commentData,
        itemId: this.item.itemId
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.handler(this.index)
          this.getItemExt()
          this.commentData = ""
        } else {
          this.$layer.msg(result.msg)
        }
      })
    },
    getComment (index) { //获取评论列表
      this.$refs.pgh.init({
        show: true,
        handler: "handler"
      })
      this.handler(1)
    },
    handler (index) {
      this.index = parseInt(index)
      var itemId = this.item.itemId;
      this.axios.get("/item/ext/comments", {
        params: {
          itemId: itemId,
          index: index,
          pageSize: 10
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.commentList = result.data.total;
          var count = result.data.count;
          this.$refs.pgh.count(Math.ceil(count / 10));
          return
        }
        this.$refs.pgh.count(1);
      })
    },
    dateFormatter (date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
    },
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '商品价格曲线' },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820.5, 820, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      });
    }
  }
}

function add0 (m) {
  return m < 10 ? '0' + m : m
}
</script>

<style>
@import "../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../assets/css/demo.css";
@import "../../assets/css/optstyle.css";
@import "../../assets/css/common/commonStyle.css";
@import "../../assets/css/common/commonFont.css";
@import "../../assets/css/style.css";
</style>